<template>
  <div class="dashboard-container">
    <head-chart>
      <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    </head-chart>
    <div class="container-item">
      <large-size title="投诉统计">
        <div style="padding: 0 10px;">
          <pie-chart></pie-chart>
        </div>
      </large-size>
    </div>
    <div class="container-item">
      <large-size title="房屋入住率">
        <div style="padding:10px; padding-top: 15px;">
          <pre-chart></pre-chart>
        </div>
      </large-size>
    </div>
    <div class="container-item" style="padding-right: 0;">
      <large-size title="车位使用率">
        <div style="padding:10px; padding-top: 15px;">
          <pre-chart></pre-chart>
        </div>
      </large-size>
    </div>
    <div class="container-item">
      <large-size title="每月投诉总量">
        <div style="padding:10px; padding-top: 15px;">
          <stacked-chart></stacked-chart>
        </div>
      </large-size>
    </div>
    <div class="container-item">
      <large-size title="投诉率高的车位">
        <div style="padding:10px; padding-top: 15px;">
          <PieChartT></PieChartT>
        </div>
      </large-size>
    </div>
    <div class="container-item" style="padding-right: 0;">
      <large-size title="小区所在位置">
        <MapContainer></MapContainer>
      </large-size>
    </div>
    <!-- <div class="container-item">
      <large-size title="模块标题"></large-size>
    </div>
    <div class="container-item">
      <large-size title="模块标题"></large-size>
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import adminDashboard from './admin'
// import editorDashboard from './editor'
import largeSize from '@/components/LargeSizeModule'
// header
import HeadChart from './components/HeadChart.vue'
// 第一排第一个
import PieChart from './components/PieChart.vue'
import PreChart from './components/PreChart.vue'
import StackedChart from './components/StackedChart'
import PieChartT from './components/PieChartT.vue'
import Hamburger from '@/components/Hamburger'
import MapContainer from '@/components/MapContainer'

export default {
  name: 'Dashboard',
  components: { 
    largeSize,
    HeadChart,
    PieChart,
    PreChart,
    StackedChart,
    PieChartT,
    Hamburger,
    MapContainer
    // adminDashboard, editorDashboard 
  },
  data() {
    return {
      // currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  created() {
    // if (!this.roles.includes('admin')) {
    //   this.currentRole = 'editorDashboard'
    // }
    this.$store.dispatch('app/toggleSideBar')
  },
  methods: {
    toggleSideBar () {
      this.$store.dispatch('app/toggleSideBar')
    }
  }
}
</script>
<style lang="scss" scoped>
  .hamburger-container {
    cursor: pointer;
    position: absolute;
    top: 30px;
    left: 0px;
    color: #034581;
  }
  .dashboard-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px 10px;
    background-image: linear-gradient(-90deg, #034581, #034d8a, #034581);
  }
  .container-item {
    width: calc(100%/3);
    padding-right: 10px;
    box-sizing: border-box;
  }
  .container-item:nth-of-type(1),
  .container-item:nth-of-type(2),
  .container-item:nth-of-type(3){
    padding-bottom: 10px;
  }
</style>
